{% for entry in children -%}

{% if active_entries and forloop.index == active_entries[2] -%}
  {% assign isActive = true -%}
  {% assign class = 'nav-link active' -%}
{% else -%}
  {% assign isActive = false -%}
  {% assign class = 'nav-link' -%}
{% endif -%}

{% if entry == 'divider' -%}

  <div class="dropdown-divider"></div>

{%- elsif entry.children -%}

  {% assign class = class | append: ' collapsable' -%}

  {% if isActive or entry.expanded -%}
    {% assign expanded = 'true' -%}
    {% assign show = 'show' -%}
  {% else -%}
    {% assign class = class | append: ' collapsed' -%}
    {% assign expanded = 'false' -%}
    {% assign show = '' -%}
  {% endif -%}

  {% assign id = parent_id | append: '-' | append: forloop.index -%}
  {% assign href = entry.permalink -%}
  {% unless href -%}
    {% assign href = '#' | append: id -%}
  {% endunless -%}

  <li class="nav-item">
    <a class="{{class}}" data-toggle="collapse" data-target="#{{id}}"
      href="{{href}}" role="button"
      aria-expanded="{{expanded}}" aria-controls="{{id}}">{{entry.title}}</a>
    <ul class="nav flex-column flex-nowrap collapse {{show}}" id="{{id}}">
      {% if isActive -%}
        {% render 'sidenav-level-4.html', parent_id:id, children:entry.children, active_entries:active_entries -%}
      {% else -%}
        {% render 'sidenav-level-4.html', parent_id:id, children:entry.children -%}
      {% endif -%}
    </ul>
  </li>
{%- elsif entry.permalink -%}
  {% if entry.permalink contains '://' -%}
    {% assign isExternal = true -%}
  {% else -%}
    {% assign isExternal = false -%}
  {% endif -%}

  <li class="nav-item">
    <a class="{{class}}" href="{{entry.permalink}}" {%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
      {{entry.title}}
    </a>
  </li>

{% endif -%}
{% endfor -%}
